<template>

	<view class="contain" style="height: 100%;">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar
			:placeholder="true"
			title="餐谱详情"
			
			:isBack="true"
			:titleBold="true"
			backIconSize="30"
			:background="{ background: '#f8f8f8' }"
			:border-bottom="false"
		>
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" @click.native.stop="goBack" size="24"></u-icon>
				<u-icon v-if="$isPermission('foodMenu_edit')" name="edit-pen-fill" size="24" @click="btnClick"></u-icon>
			</view>
			
		</u-navbar>
		 <!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar
			:placeholder="true"
			title="餐谱详情"
			:autoBack="true"
			:isBack="true"
			:titleBold="true"
			backIconSize="30"
			:background="{ background: '#f8f8f8' }"
			:border-bottom="false"
		>
			<view class="u-nav-slot" slot="right">
				<u-icon v-if="$isPermission('foodMenu_edit')" name="edit-pen-fill" size="24" @click="btnClick"></u-icon>
			</view>
		</u-navbar>
		 <!-- #endif -->
		<!-- <u-navbar title="餐谱详情" :autoBack="true" :isBack='true' :titleBold='true' backIconSize='30'
			:background="{ background: '#f8f8f8' }" :border-bottom="false">
			<view class="slot-wrap" slot="right"><u-icon name="edit-pen-fill" size="24" @click="btnClick"></u-icon>
			</view>
		</u-navbar> -->

		<view v-if="banner.foodsImg">
			<u-swiper :height='180' :list="banner.foodsImg" @change="change" @click="click" indicator indicatorMode="line"></u-swiper>
			<!-- <graceSwiper :spacing="0" :padding="0" :swiperItems="swiperItems"  indicatorType="dot" :indicatorTypetwo="true" indicatorBarBgColor="rgba(0,0,0, 0.2)" indicatorPosition="relative" indicatorColor="#999999" 
			:width="700"  :indicatorRadius="10" :height="780" @taped="taped" :smilSpot="smilSpot"></graceSwiper> -->
		</view>
		<view style="margin-top: 10px;">
			<view class="grace-text1">{{banner.foodsTitle}}</view>
		</view>
		<view class="" >
			<text class="grace-text2">{{banner.foodsAuthor}}</text>
			<text class="grace-text2">发表于</text>
			<text class="grace-text2">{{banner.createTime}}</text>
			<!-- <text v-model="banner.foodsTitle"></text> -->
		</view>
		<view class="img-Detail">
			<rich-text :nodes="banner.foodsContent"></rich-text>
		</view>
	</view>
</template>

<script>
	// import graceSwiper from "../../graceUI/components/graceSwiper.vue";
	// import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				title: 'list-triplex-row',
				banner: {},
				htmlString: "",
				swiperItems: [],
				screenWidth: 0,
				smilSpot: true
			}
		},
		onLoad(event) {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.screenWidth = res.screenWidth
				}
			});
			try {
				this.banner = JSON.parse(decodeURIComponent(event.detailDate));
				console.log("我是banner！！！@@@@@@", this.banner)



				var richtext = this.banner.foodsContent;
				const regex = new RegExp('<p', 'gi');
				const regextwo = new RegExp('<br', 'gi');
				richtext = richtext.replace(regex, `<p style="margin-top:10px;
color: #333333;line-height:13px"`);
				this.banner.foodsContent = richtext;
			} catch (error) {
				this.banner = JSON.parse(event.detailDate);
				this.banner.foodsContent = this.banner.foodsContent.replace(/<img/g,
					"<image style=\"width:100%;height:240px\"");
			}
		},
		components: {
			// gracePage, graceSwiper
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			change(e) {

			},
			click(e) {

			},
			btnClick() {
				let that = this;
				let id = that.banner.id;
				console.log("id", id)
				uni.navigateTo({
					url: "publish?id=" + id,
				})
			},
			taped(e) {
				let imgIndex = e;
				var imgArr = [];
				this.swiperItems.forEach(function(item, index) {
					imgArr.push(item.img)
				});
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[imgIndex]
				});

			},
			goback() {
				uni.navigateTo({
					url: "foodMenu"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-nav-slot{
		display: flex;
	}
	/deep/.uicon-edit-pen-fill{
		margin-left: 90rpx;
	}
	.title {
		text-align: center;
		word-wrap: break-word
	}
	.contain{
		padding: 0 20rpx;
	}
	/* view {
        font-size: 28upx;
        line-height: 1.8;
    }
 */
	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #fff;
		padding: 20upx 30upx;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

	.article-meta {
		padding: 20upx 40upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
	}

	.article-text {
		font-size: 26upx;
		line-height: 50upx;
		margin: 0 20upx;
	}

	.article-author,
	.article-time {
		font-size: 30upx;
	}

	.article-content {
		padding: 0 30upx;
		overflow: hidden;
		font-size: 30upx;
		margin-bottom: 30upx;
		word-wrap: break-word;
	}

	.grace-text1 {
		display: block;
		margin-bottom:20rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		letter-spacing: 2rpx;
	}

	.grace-text2 {
		
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
		letter-spacing: 2rpx;
		
	}

	.img-Detail {
		padding-bottom: 60rpx;
	}
</style>